.zt-Flows {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;

  .tree,
  .workSpace {
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
  }

  .tree,
  #stencil,
  #graph-container {
    margin-right: 5px;
  }

  .graph {
    display: flex;
    flex: 3;

    #stencil {
      flex: 0.5;
    }

    #graph-container {
      flex: 2;
      background: #fff;
    }
  }

  .workSpace {
    flex: 1;
  }

  .dnd-wrap {
    overflow: auto;
    height: 100%;
    background: #fff;
    margin-right: 5px;
  }

  .dnd-wrap {
    width: 160px;
    padding: 10px;
    display: flex;
    user-select: none;
    align-items: center;
    flex-direction: column;
    border: 1px solid #f0f0f0;

    h4 {
      font-weight: 700;
      margin: 5px !important;
    }

    .dnd-rect {
      width: 90px;
      height: 40px;
      margin: 10px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #8f8f8f;
      border-radius: 6px;
      cursor: move;
      transform: translate3d(0, 0, 0);
    }

    .custom-react-node {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-align: center;
      border: 1px solid #070707;
    }

    .custom-react-node span {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}
